<div class="row">
	<div class="col-lg-4 col-xs-12 nopadding-right" id="leftTree">
		<div class="widget flat radius-bordered">
			<div class="widget-header bg-sky theme">
				<span class="widget-caption">数据库表/视图</span>
			</div>
			<div class="widget-body" id="databaseTablesTree" style="padding: 0px; min-height: 400px; overflow: auto;">
				<!-- 动态加载数据库属性结构面板 -->
			</div>
		</div>
	</div>
	<div class="col-xs-8" id="rightView">
		<div class="widget flat radius-bordered ">
 			<div class="widget-header widget-header bg-sky theme">
                <span class="widget-caption">表结构映射预览</span>
            </div>
			<div class="widget-body">
				<div id="registration-form">
					<form class="form-horizontal"
						action="codeGenerateController/showThirdStepSettingPage.do"
						method="post" role="form" 
						id="codeGenerateParamsFrom"
					 	isCanRefresh="true"
						data-bv-message="This value is not valid"
						data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
						data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
						data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
						<input type="hidden" name="projectDir" value="${customConfig.projectDir}">
						<input type="hidden" name="templatesMapping" value="${customConfig.templatesMapping}">
						<input type="hidden" name="module" value="${customConfig.module}">
						<input type="hidden" name="templateDir" value="${customConfig.templateDir}">
						<input type="hidden" name="javaFileOutDir" value="${customConfig.javaFileOutDir}">
						<input type="hidden" name="viewFileOutDir" value="${customConfig.viewFileOutDir}">
						<div class="form-group">
							<label class="col-sm-2 control-label no-padding-right">数据库表/视图</label>
							<div class="col-sm-10">
		                        <input class="checkbox-slider slider-icon colored-blue" type="checkbox" id="treeOpenOrClose">
		                        <span class="text"></span>
							</div>
						</div>
						<div class="form-group">
							<label for="nowCatalog"
								class="col-sm-2 control-label no-padding-right">当前选中方案</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="catalog" id="nowCatalog" placeholder="请在左侧选择数据库中的方案(库名)" readonly="readonly">
							</div>
						</div>
						<div class="form-group">
							<label for="nowTableName" class="col-sm-2 control-label no-padding-right">当前选中表</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="tableName" id="nowTableName" placeholder="请在左侧选择数据库中的表" readonly="readonly">
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-12 col-md-12">
								 <div class="widget">
						            <div class="widget-header bg-themeprimary">
						                <span class="widget-caption">详细映射预览</span>
						                <div class="widget-buttons">
						                    <a href="#" data-toggle="maximize">
						                        <i class="fa fa-expand"></i>
						                    </a>
						                    <a href="#" data-toggle="collapse">
						                        <i class="fa fa-minus"></i>
						                    </a>
						                </div>
						            </div>
						            <div class="widget-body no-padding">
										<div class="table-scrollable" id="databaseTableColumnsView">
											请选择方案及表
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-12 col-md-12">
						        <div class="widget flat radius-bordered">
						            <div class="widget-header bg-themeprimary">
						                <span class="widget-caption">生成代码预览</span>
						                <div class="widget-buttons">
						                    <a href="#" data-toggle="maximize">
						                        <i class="fa fa-expand"></i>
						                    </a>
						                    <a href="#" data-toggle="collapse">
						                        <i class="fa fa-minus"></i>
						                    </a>
						                </div>
						            </div>
						            <div class="widget-body">
						                <div class="widget-main ">
						                    <div class="tabbable">
						                        <ul class="nav nav-tabs tabs-flat" id="myTab11">
						                            <li class="active">
						                                <a data-toggle="tab" href="#Controller">
						                                    Controller
						                                </a>
						                            </li>
						                            <li>
						                                <a data-toggle="tab" href="#IService">
						                                    IService
						                                </a>
						                            </li>
						                            <li>
						                                <a data-toggle="tab" href="#Service">
						                                    Service
						                                </a>
						                            </li>
						                            <li>
						                                <a data-toggle="tab" href="#IDao">
						                                    IDao
						                                </a>
						                            </li>
						                            <li>
						                                <a data-toggle="tab" href="#Dao">
						                                    Dao
						                                </a>
						                            </li>
						                            <li>
						                                <a data-toggle="tab" href="#ListView">
						                                    List view
						                                </a>
						                            </li>
						                            <li>
						                                <a data-toggle="tab" href="#EditView">
						                                    Edit view
						                                </a>
						                            </li>
						                        </ul>
						                        <div class="tab-content">
						                            <div id="Controller" class="tab-pane active">
						                                <p>控制层.</p>
						                            </div>
						
						                            <div id="IService" class="tab-pane">
						                                <p>服务层.</p>
						                            </div>
						                            
						                            <div id="Service" class="tab-pane">
						                                <p>服务层实现.</p>
						                            </div>
						                            
						                            <div id="IDao" class="tab-pane">
						                                <p>数据库操作层.</p>
						                            </div>
						                            
						                            <div id="Dao" class="tab-pane">
						                                <p>数据库操作层实现.</p>
						                            </div>
						                            
						                            <div id="ListView" class="tab-pane">
						                                <p>列表视图.</p>
						                            </div>
						                            
						                            <div id="EditView" class="tab-pane">
						                                <p>数据编辑视图.</p>
						                            </div>
						                        </div>
						                    </div>
						                </div>
						            </div>
						        </div>
						    </div>
					    </div>
						<div class="form-group">
							<div class="col-sm-offset-5 col-sm-7">
								<button type="submit" class="btn btn-default">保存任务</button>
								<button type="submit" class="btn btn-blue">下 一 步</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="assets/js/fuelux/treeview/tree-custom.min.js"></script>
<script src="assets/js/validation/bootstrapValidator_init.js"></script>
<script>
	$("#codeGenerateParamsFrom").on("ajaxSubmitCallback",function(event,data){
		setMainViewHtml(data, false);
	});
	
	$(document).on("click","#databaseTableTree", function() {
		var selectedItems = $("#databaseTableTree").tree("selectedItems");
		console.log("selected items: ", selectedItems);
		if (selectedItems.length == 0) {
			$("#nowTableName").val("");
			clearnDatabaseTableColumn();
		}
	});

	$(document).on("opened","#databaseTableTree", function(evt, data) {
		console.log("sub-folder opened: ", data.params);
		var nowCatalog = "";
		if (data.params && data.params.catalog) {
			nowCatalog = data.params.catalog;
		}
		$("#nowCatalog").val(nowCatalog);
		$("#nowTableName").val("");
		clearnDatabaseTableColumn();
	});
	$(document).on("selected","#databaseTableTree", function(evt, data) {
		console.log("item selected: ", data.info[0]);
		var selectedItems = $(this).tree('selectedItems')
		console.log(selectedItems);
		var nowTableName = "";
		if (data.info && data.info[0].name) {
			nowTableName = data.info[0].name;
		}
		$("#nowTableName").val(nowTableName);
		loadDatabaseTableColumn();
	});

	$("#databaseTablesTree").load("switchView.do?viewPath=sysPage/platform/codeGenerate/databaseTablesTree.html",function(){
		loadAjaxTree("databaseTableTree");
	});
	
	var isOpen=true;
	var isFirstClick=true;
	$("#treeOpenOrClose").on("click",function(){
		if(isFirstClick){
			isFirstClick=false;
			return ;
		}
		if(isOpen){
			$("#leftTree").stop().slideUp(1,function(){
				$("#rightView").addClass("col-xs-12").removeClass("col-xs-8");
			});
			isOpen=false;
		}else{
			$("#rightView").addClass("col-xs-8").removeClass("col-xs-12");
			$("#leftTree").stop().slideDown(1);
			isOpen=true;
		}
	});
	$("#treeOpenOrClose").click();
	
	function clearnDatabaseTableColumn(){
		$("#databaseTableColumnsView").html("请在左侧选择方案及表");
	}
	
	function loadDatabaseTableColumn(){
		var nowCatalog=$("#nowCatalog").val();
		var nowTableName=$("#nowTableName").val();
		if(nowTableName){
			var url = "codeGenerateController/tableColumns.do";
			var params = {
				catalog : nowCatalog,
				tableName : nowTableName
			};
			ajaxRequest(url, params, function(data) {
				$("#databaseTableColumnsView").html(data);
				$("#databaseTableColumnsView").css("width","100% !important");
			},function(XMLHttpRequest, textStatus, errorThrown) {
				ajaxError(errorThrown);
			}, "GET", "HTML");
		}
	}
</script>